<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>延迟加载</title>
    <style>
    .lazyload {
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F17541638%2Ff%2F890904776.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=79826fb57a8b6d1880a166beee5f0ef9" alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2Fv2-07f2ff011d45c4134cbd74853d57227e_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=4bb357ac845d6785858a194b80d370a9" alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp9.itc.cn%2Fq_70%2Fimages03%2F20210819%2F0bd49bafadc14ba5aee541e7f479c153.jpeg&refer=http%3A%2F%2Fp9.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=ce5defa00f639920e08b3e2349dcb5c3" alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-4a9b93a7321a12a2bdcea760e1cc8440_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=80938683015043bc4d2b288975181ece" alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F274900%2Ff%2F281010382.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=e34642424d7ebd8d70802af1e5e99467" alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0625%252Fd6721fc8j00qv86gi001dc000hs00buc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=5dc9b1f32cd5f002e9555f46625f6dbb" alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.guancha.cn%2Fnews%2F2021%2F07%2F23%2F20210723162723458jpg&refer=http%3A%2F%2Fi.guancha.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=6001bc61acdaf75f43f16a9ad8eb6fb9" alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4" data-src="https://pics2.baidu.com/feed/37d3d539b6003af349d03a5f09381c551038b647.jpeg?token=51afa2cf0e3695efc1a213b63160084d" alt="">
    </div>
    <div class="lazyload">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F23%2F20150523090306_fwtkR.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654392168&t=4683358794f08b94dbbfa84176b9faf4" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fimages01%2F20210529%2Fbb24a2351b084f70a2123ef038302510.jpeg&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654391703&t=71bc96460fd2bf1c8d9022fedb51d6c8" alt="">
    </div>
    <script>
        window.addEventListener('DOMContentLoaded',function(){
            // 伪数组
            let imgList = [...document.querySelectorAll('.lazyload img')]
            let length = imgList.length;
            const imgLazyload = (function (){
                // 闭包空间
                // 计数法
                let count = 0;
                return function(){
                    let deleteIndexList = [];
                    imgList.forEach((img,index)=>{
                    let rect = img.getBoundingClientRect();
                    if(rect.top < window.innerHeight){
                        // 已经加载了, img 从imgList移除
                        img.src = img.dataset.src;
                        deleteIndexList.push(index)
                        count++;
                        if(count == length){
                            document.removeEventListener('scroll',imgLazyload)
                        }
                    }
                })
                // deleteIndexList 收集到了本次scroll 要移除的img
                imgList = imgList.filter(
                    (img,index)=>!deleteIndexList.includes(index));
                }
                console.log(imgList)
                // imgList.forEach((img,index)=>{
                //     // console.log(img,index)
                //     let rect = img.getBoundingClientRect();
                //     if(rect.top < window.innerHeight){
                //         img.src = img.dataset.src;
                //     }
                //     console.log(rect); top<window.innerHeight
                // })
                // console.log('-------')
                // 1.每滚动 检测一下所有的图片
                // 2.图片是否处于可视区
                // 3.是 data-src -> src 
                // 4.否 不加载
            })();
            imgLazyload();
            document.addEventListener('scroll',imgLazyload)
        })
    </script>
</body>
</html>